<template>
 <div id="map" class="mapC"></div>
</template>

<script>
import 'ol/ol.css'
import Feature from 'ol/Feature'
import Map from 'ol/Map'
import Point from 'ol/geom/Point'
// import TileJSON from 'ol/source/TileJSON'
import XYZ from 'ol/source/XYZ'
import VectorSource from 'ol/source/Vector'
import View from 'ol/View'
import {Icon, Style} from 'ol/style'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
import {fromLonLat} from 'ol/proj'
export default {
  name: 'index',
  data () {
    return {}
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      const rome = new Feature({
        geometry: new Point(fromLonLat([12.5, 41.9]))
      })

      const london = new Feature({
        geometry: new Point(fromLonLat([-0.12755, 51.507222]))
      })

      const madrid = new Feature({
        geometry: new Point(fromLonLat([-3.683333, 40.4]))
      })
      const paris = new Feature({
        geometry: new Point(fromLonLat([2.353, 48.8566]))
      })
      const berlin = new Feature({
        geometry: new Point(fromLonLat([13.3884, 52.5169]))
      })

      rome.setStyle(
        new Style({
          image: new Icon({
            color: '#BADA55',
            crossOrigin: 'anonymous',
            // For Internet Explorer 11
            imgSize: [20, 20],
            src: 'zlocal/data/square.svg'
          })
        })
      )

      london.setStyle(
        new Style({
          image: new Icon({
            color: 'rgba(255, 0, 0, .5)',
            crossOrigin: 'anonymous',
            src: 'zlocal/data/bigdot.png',
            scale: 0.2
          })
        })
      )

      madrid.setStyle(
        new Style({
          image: new Icon({
            crossOrigin: 'anonymous',
            src: 'zlocal/data/bigdot.png',
            scale: 0.2
          })
        })
      )

      paris.setStyle(
        new Style({
          image: new Icon({
            color: '#8959A8',
            crossOrigin: 'anonymous',
            // For Internet Explorer 11
            imgSize: [20, 20],
            src: 'zlocal/data/dot.svg'
          })
        })
      )

      berlin.setStyle(
        new Style({
          image: new Icon({
            crossOrigin: 'anonymous',
            // For Internet Explorer 11
            imgSize: [20, 20],
            src: 'zlocal/data/dot.svg'
          })
        })
      )
      const vectorSource = new VectorSource({
        features: [rome, london, madrid, paris, berlin]
      })

      const vectorLayer = new VectorLayer({
        source: vectorSource
      })

      const rasterLayer = new TileLayer({
        source: new XYZ({
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png',
          crossOrigin: ''
        })
      })
      // eslint-disable-next-line
      const map = new Map({
        layers: [rasterLayer, vectorLayer],
        target: 'map',
        view: new View({
          center: fromLonLat([2.896372, 44.6024]),
          zoom: 3
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
